<template>
	<div>
		<div class="searchWord">

			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="状态">
					<el-select clearable v-model="listShopParam.shopStatus" placeholder="请选择">
						<el-option label="启用" value="0">
						</el-option>
						<el-option label="禁用" value="1">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模糊条件">
					<el-input style="width: 200px;" placeholder="请输入内容" v-model="listShopParam.keyword" clearable>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" round @click="loadShop(1)">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" round @click="openAdd ">添加</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :disabled="ids.length <= 0" type="danger" @click="delShop">删除</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" round @click="openUpdate">修改</el-button>
				</el-form-item>
			</el-form>
		</div>


		<div>
			<el-table :data="shops" @selection-change="getChecks">
				<el-table-column type="selection" label="序号">
				</el-table-column>
				<el-table-column type="index" label="序号">
				</el-table-column>
				<el-table-column prop="shopName" label="门店名称">
				</el-table-column>
				<el-table-column prop="shopLinkman" label="联系人">
				</el-table-column>
				<el-table-column prop="shopPhone" label="手机号">
				</el-table-column>
				<el-table-column prop="shopAddress" label="地址">
				</el-table-column>
				<el-table-column prop="warehouseName" label="管辖仓库">
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						{{ scope.row.shopStatus == 1 ? '停用' : '启用' }}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-pagination :page-sizes="sizes" @size-change="sizeChangeFind" :current-page="listShopParam.indexPage"
				@current-change="changePage" background layout="sizes, prev, pager, next" :total="total"
				:page-size="listShopParam.pageSize">
			</el-pagination>
		</div>
		<el-dialog @close="clearAddForm" title="新增门店" :visible.sync="addMovieVisible">
			<div>
				<el-form>
					<el-form-item label="门店名称">
						<el-input v-model="saveShopParam.shopName"></el-input>
					</el-form-item>
					<el-form-item label="联系人">
						<el-input v-model="saveShopParam.shopLinkman"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="saveShopParam.shopPhone"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input v-model="saveShopParam.shopAddress"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<template>
							<el-radio v-model="saveShopParam.shopStatus" label="0">启用</el-radio>
							<el-radio v-model="saveShopParam.shopStatus" label="1">停用</el-radio>
						</template>
					</el-form-item>
					<el-transfer v-model="saveShopParam.warehouseIds" :data="Allhouse" :titles="['待选仓库','已选仓库']"
						:button-texts="['', '']">
					</el-transfer>
				</el-form>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveShop">提 交</el-button>
			</div>
		</el-dialog>
		<el-dialog @close="clearUpForm" title="修改门店" :visible.sync="UpdateVisible">
			<div>
				<el-form>
					<el-form-item label="门店名称">
						<el-input v-model="updateShopParam.shopName"></el-input>
					</el-form-item>
					<el-form-item label="联系人">
						<el-input v-model="updateShopParam.shopLinkman"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="updateShopParam.shopPhone"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input v-model="updateShopParam.shopAddress"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-radio-group v-model="updateShopParam.shopStatus">
							<el-radio :label="0">启用</el-radio>
							<el-radio :label="1">停用</el-radio>
						</el-radio-group>

					</el-form-item>
					<el-transfer v-model="updateShopParam.warehouseIds"
						:right-default-checked="updateShopParam.warehouseIds" :data="Allhouses"
						:titles="['待选仓库','已选仓库']" :button-texts="['', '']">
					</el-transfer>
				</el-form>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="Update">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				listShopParam: {
					indexPage: 1,
					pageSize: 3,
					keyword: null,
					warehouseStatus: null
				},
				total: 0,
				sizes: [1, 2, 3, 5, 10, 20],
				shops: [],
				ids: [],
				addMovieVisible: false,
				UpdateVisible: false,
				saveShopParam: {
					shopName: null,
					shopLinkman: null,
					shopPhone: null,
					shopAddress: null,
					shopStatus: null,
					warehouseIds: []
				},
				updateShopParam: [],
				Allhouse: [],
				Allhouses: []
			}
		},

		methods: {
			loadHouse() {
				this.$http.get("/warehouse-table/listAllhouse").then(resp => {
					if (resp.data.code == 200) {
						for (var i = 0; i < resp.data.data.length; i++) {

							this.Allhouse.push({
								key: resp.data.data[i].warehouseId,
								label: resp.data.data[i].warehouseName
							})
						}
					} else {
						this.$message({
							type: 'error',
							message: '查询失败 ' + resp.data.msg
						});
					}

				})
			},
			loadShop(page) {
				if (page != undefined) {
					this.listShopParam.indexPage = page;
				}
				this.$http.post("/shop-table/listShop", this.listShopParam).then(resp => {
					if (resp.data.code == 200) {

						this.ids = [];
						this.shops = resp.data.data.shopDtoList;
						this.total = resp.data.data.total;
						this.listShopParam.indexPage = resp.data.data.indexPage;
					} else {
						this.$message({
							type: 'error',
							message: '查询失败 ' + resp.data.msg
						});
					}


				})
			},
			getChecks(sel) {
				this.ids = [];
				for (let i = 0; i < sel.length; i++) {
					this.ids.push(sel[i].shopId);
				}
			},
			sizeChangeFind(size) {
				this.listShopParam.pageSize = size;
				this.loadShop();
			},
			changePage(page) {
				this.listShopParam.indexPage = page;
				this.loadShop();
			},
			delShop() {
				if (this.ids.length > 0) {
					this.$http.post("/shop-table/delShop", this.ids).then(resp => {
						if (resp.data.code == 200) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.loadShop();
						} else {
							this.$message({
								type: 'error',
								message: '删除失败 ' + resp.data.msg
							});

						}
					})
				}
			},
			saveShop() {
				this.$http.post("/shop-table/saveShop", this.saveShopParam).then(resp => {
					if (resp.data.code == 200) {
						this.addMovieVisible = !this.addMovieVisible;
						this.$message({
							message: '添加成功',
							type: 'success',

						});
						this.loadShop();
						this.clearAddForm();
						location.reload();
					} else {
						this.$message({
							type: 'error',
							message: '添加失败 ' + resp.data.msg
						});
					}
				})
			},
			openAdd() {
				this.addMovieVisible = !this.addMovieVisible;
				this.loadHouse();
			},

			clearAddForm() {
				this.saveShopParam = {
					shopName: null,
					shopLinkman: null,
					shopPhone: null,
					shopAddress: null,
					shopStatus: null,
					warehouseIds: null
				}
			},
			clearUpForm() {
				this.updateShopParam = []
			},
			Update() {
				this.$http.post("/shop-table/updateShop", this.updateShopParam).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: '更新成功',
							type: 'success'
						});

						// location.reload();
						this.loadShop();
						this.clearUpForm();
					} else {
						this.$message({
							type: 'error',
							message: '更新失败 ' + resp.data.msg
						});
					}

					this.UpdateVisible = !this.UpdateVisible;

				})

			},
			openUpdate() {
				//打开了更新页面
				if (!this.UpdateVisible) {
					if (this.ids.length <= 0 || this.ids.length > 1) {
						alert("选择错误")
						return;
					}
				}
				this.UpdateVisible = !this.UpdateVisible;







				if (this.UpdateVisible) {
					this.clearUpForm();
					this.Allhouses = [];
					this.updateShopParam.warehouseIds = [];
					this.updateDate();

				}
				// console.log(this.updateShopParam)
				// console.log(this.Allhouses)
				// console.log(this.updateShopParam.warehouseIds)
			},
			updateDate() {
				this.$http.get("/warehouse-table/listAllhouse").then(resp => {

					if (resp.data.code == 200) {

						for (var i = 0; i < resp.data.data.length; i++) {
							this.Allhouses.push({
								key: resp.data.data[i].warehouseId,
								label: resp.data.data[i].warehouseName
							})
						}


					} else {
						this.$message({
							type: 'error',
							message: '查询失败 ' + resp.data.msg
						});
					}
				})

				//获取当前门店信息
				this.$http.get("/shop-table/getShop/" + this.ids[0]).then(resp => {
					if (resp.data.code == 200) {
						this.updateShopParam = resp.data.data;
						this.updateShopParam.warehouseIds = resp.data.data.warehouseIds;
					} else {
						this.$message({
							type: 'error',
							message: '查询失败 ' + resp.data.msg
						});
					}

				})
			}


		},
		created() {
			this.loadShop();

		}
	}
</script>

<style>
</style>
